<template>
  <div>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <!-- 顶部区域 -->
        <a-col :span="24">
          <a-card>
            <div class="box-ver-hor-between">
              <div class="primary-color">优惠配置</div>
              <div>
                <a-button type="primary" @click="onSubmit">保存</a-button>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="24">
          <a-card>
            <a-form :model="modelForm" :label-col="{span:6}" :wrapperCol="{span: 15}">
              <a-row>
                <a-col :span="7">
                  <a-form-item label="优惠名称">
                    <a-input v-model:value="modelForm.name" />
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="优惠开始时间">
                    <a-date-picker style="width: 100%" show-time placeholder="请选择" @change="onTimeChange($event, 'start')"/>
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="优惠结束时间">
                    <a-date-picker style="width: 100%" show-time placeholder="请选择" @change="onTimeChange($event, 'end')"/>
                  </a-form-item>
                </a-col>
                <a-col :span="3"></a-col>
                <a-col :span="7">
                  <a-form-item label="优惠课程类型">
                    <a-select :default-value="1" @change="handleChange">
                      <a-select-option v-for="(item, index) in 5" :key="index" :value="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="优惠类型">
                    <a-select :default-value="1" @change="handleChange">
                      <a-select-option v-for="(item, index) in 5" :key="index" :value="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="总价封顶金额">
                    <a-input v-model:value="modelForm.price" />
                  </a-form-item>
                </a-col>
                <a-col :span="3"></a-col>
                <a-col :span="7">
                  <a-form-item label="优惠金额">
                    <a-input v-model:value="modelForm.price" />
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="启用禁用">
                    <a-input v-model:value="modelForm.price" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item>
                    <div style="margin-left:25px;">阶梯课程数&nbsp;&nbsp;<a-button type="primary">添加</a-button></div>
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="开始课程数">
                    <a-input v-model:value="modelForm.price" />
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="结束课程数">
                    <a-input v-model:value="modelForm.price" />
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="优惠金额">
                    <a-input v-model:value="modelForm.price" />
                  </a-form-item>
                </a-col>
                <a-col :span="3">
                  <a-button style="margin-left:20px;" type="danger">删除</a-button>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="开始课程数">
                    <a-input v-model:value="modelForm.price" />
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="结束课程数">
                    <a-input v-model:value="modelForm.price" />
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="优惠金额">
                    <a-input v-model:value="modelForm.price" />
                  </a-form-item>
                </a-col>
                <a-col :span="3">
                  <a-button style="margin-left:20px;" type="danger">删除</a-button>
                </a-col>
                <a-col :span="24">
                  <a-form-item>
                    <div style="margin-left:25px;">条件规则</div>
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="选择学校">
                    <a-select :default-value="1" @change="handleChange">
                      <a-select-option v-for="(item, index) in 5" :key="index" :value="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="项目">
                    <a-select :default-value="1" @change="handleChange">
                      <a-select-option v-for="(item, index) in 5" :key="index" :value="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="选择年份">
                    <a-select :default-value="1" @change="handleChange">
                      <a-select-option v-for="(item, index) in 5" :key="index" :value="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="3"></a-col>
                <a-col :span="7">
                  <a-form-item label="季度">
                    <a-select :default-value="1" @change="handleChange">
                      <a-select-option v-for="(item, index) in 5" :key="index" :value="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="学期时段">
                    <a-select :default-value="1" @change="handleChange">
                      <a-select-option v-for="(item, index) in 5" :key="index" :value="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="学科类别">
                    <a-select :default-value="1" @change="handleChange">
                      <a-select-option v-for="(item, index) in 5" :key="index" :value="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="3"></a-col>
                <a-col :span="7">
                  <a-form-item label="选择课程">
                    <a-select :default-value="1" @change="handleChange">
                      <a-select-option v-for="(item, index) in 5" :key="index" :value="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="7">
                  <a-form-item label="学分">
                    <a-select :default-value="1" @change="handleChange">
                      <a-select-option v-for="(item, index) in 5" :key="index" :value="index">
                        {{item}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
  </div>
</template>

<script>
import {defineComponent, reactive, toRaw, ref} from 'vue';

export default defineComponent({
  name: "add",
  setup() {
    const modelForm = reactive({
      name: '',
      region: undefined,
      date1: undefined,
      delivery: false,
      type: [],
      resource: '',
      desc: '',
    });

    const onSubmit = () => {
      console.log('submit!', toRaw(modelForm));
    };

    const onTimeChange = (event, type) => {
      console.log('event, type: ', event, type);
    }
    const handleChange = (event) => {
      console.log('event, type: ', event);
    }

    const loading = ref(false);


    return {
      labelCol: {
        span: 9,
      },
      modelForm,
      onSubmit,
      loading,
      onTimeChange,
    };
  },
})
</script>

<style lang="less" scoped>
.upload-title {
  font-size: 14px;
  color: #b7b7b7;
}
</style>
